// components/fullColor/fullColor.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
   
  },
  options:{
    // 定义纯数据字段，提高页面的渲染性能
    pureDataPattern:/^_/
  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb:{
      R:155,
      G:20,
      B:20,
    },
    color:'155,20,20',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    fullColor(e){
      if(e.currentTarget.dataset.color=="R"){
        this.setData({
          '_rgb.R':this.data._rgb.R+5>255?255:this.data._rgb.R+5
        })
      }
      if(e.currentTarget.dataset.color=="G"){
        this.setData({
          '_rgb.G':this.data._rgb.G+5>255?255:this.data._rgb.G+5
        })
      }
      if(e.currentTarget.dataset.color=="B"){
        this.setData({
          '_rgb.B':this.data._rgb.B+5>255?255:this.data._rgb.B+5
        })
      }
    },
    // 为对象内的属性批量改变属性
    _randomcolor(){
      this.setData({
        _rgb:{
          R:Math.floor(Math.random()*256),
          G:Math.floor(Math.random()*256),
          B:Math.floor(Math.random()*256)
        }
      })
    }
  },
  observers:{
    // 监听多个属性
    // '_rgb.R,_rgb.G,_rgb.B':function(newR,newG,newB){
    //   this.setData({
    //     color:newR+','+newG+','+newB
    //   })
    // }
    // 同意监听多个属性
    '_rgb.**':function(obj){
      this.setData({
        color:`${obj.R},${obj.G},${obj.B}`
      })
    }
  },
  // 旧的生命周期声明方式
  created(){
    console.log("旧的生命周期声明方式created")
  },
  // 旧的生命周期声明方式
  attached(){
    console.log("旧的生命周期声明方式attached")
  },
  lifetimes:{
    created(){
      console.log("新的生命周期声明方式created")
    },
    // 旧的生命周期声明方式
    attached(){
      console.log("新的生命周期声明方式attached")
    },
  },
  // 监听页面的生命周期函数，包括显示，隐藏，尺寸变化
  pageLifetimes:{
    show(){
      console.log("show")
      this._randomcolor()
    },
    hide(){
      console.log("hide")
    },
    resize(){
      console.log("resize")
    },
  }
})
